<template>
  <n-modal :show="state.dialogFormVisible" @onUpdateShow="close">
    <div class="exchange-dia">
      <div class="header-nav flex flex-between">
        <div class="title">收益兑换牛牛币</div>
        <div class="close" @click="close">
          <i class="landscape landscape-guanbi"></i>
        </div>
      </div>
      <div class="con">
        <div class="cell">
          <span>当前收益金额：</span>
          <span class="price">100</span>
          <span>元</span>
          <span class="tip">（可兑换{{ maxNum }}牛牛币）</span>
        </div>
        <div class="cell">当前牛牛币余额：200牛牛币</div>
        <div class="cell">
          <span>兑换牛牛币数量：</span>
          <n-input-number
            class="input-number"
            v-model:value="queryForm.exchangeGold"
            :min="1"
            :step="1"
            :show-button="false"
            clearable
          />
          <span class="ml10">牛牛币</span>
        </div>
        <div class="tool flex">
          <n-button class="btn" @click="close">取消</n-button>
          <n-button class="btn confirm-btn" type="primary" @click="handSubmit">
            确认
          </n-button>
        </div>
      </div>
    </div>
  </n-modal>
</template>
<script setup lang="ts">
import { NModal, NInputNumber, NButton, useMessage } from 'naive-ui'
import { computed, reactive, ref } from 'vue'
const toast = useMessage()
const state = reactive({
  dialogFormVisible: false
})
const queryForm = ref({
  exchangeGold: null
})
const handSubmit = async () => {
  if (!queryForm.value.exchangeGold) {
    toast.error('请输入兑换牛牛币数量')
    return
  }
  toast.success('兑换成功')
  close()
}
const close = () => {
  queryForm.value = {
    exchangeGold: null
  }
  state.dialogFormVisible = false
}
const bili = ref<number>(1)
const maxNum = computed(() => {
  const num = 10 * bili.value
  return Math.floor(num)
})
const open = async () => {
  queryForm.value.exchangeGold = null
  bili.value = 1
  state.dialogFormVisible = true
}
defineExpose({
  open
})
</script>
<style scoped lang="scss">
.exchange-dia {
  width: 480px;
  background: #fff;
  border-radius: 16px 16px 16px 16px;
  padding-bottom: 10px;
  .header-nav {
    padding: 20px;
    border-bottom: 1px solid #eeeeee;
    .title {
      font-size: 20px;
      font-family: PingFang SC, PingFang SC;
      font-weight: bold;
      color: #333333;
    }
    .close {
      cursor: pointer;
      i {
        font-size: 20px;
        color: #999999;
      }
    }
  }
  .con {
    padding: 20px;
    .cell {
      font-size: 16px;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      color: #333333;
      padding-bottom: 20px;
      display: flex;
      align-items: center;
      .price {
        color: #f1423d;
      }
      .tip {
        color: #999999;
      }
      .input-number {
        width: 183px;
      }
    }
  }
  .tool {
    margin-top: 20px;
    justify-content: center;
    .btn {
      width: 124px;
      height: 40px;
    }
    .confirm-btn {
      margin-left: 24px;
    }
  }
}
</style>
